<template>
    <div class="app-container">
      <!-- 使用el-row和el-col布局，gutter为20 -->
      <el-row :gutter="20">
        <!-- 左侧个人信息卡片，占据6列，在xs屏幕下占据24列 -->
        <el-col :span="6" :xs="24">
          <!-- 使用el-card组件，class为box-card -->
          <el-card class="box-card">
            <!-- 卡片头部 -->
            <div slot="header" class="clearfix">
              <span>个人信息</span>
            </div>
            <!-- 卡片内容 -->
            <div>
              <!-- 用户头像 -->
              <div class="text-center">
                <userAvatar />
              </div>
              <!-- 用户信息列表 -->
              <ul class="list-group list-group-striped">
                <!-- 用户名称 -->
                <li class="list-group-item">
                  <svg-icon icon-class="user" />用户名称
                  <div class="pull-right">{{ user.userName }}</div>
                </li>
                <!-- 手机号码 -->
                <li class="list-group-item">
                  <svg-icon icon-class="phone" />手机号码
                  <div class="pull-right">{{ user.phonenumber }}</div>
                </li>
                <!-- 所属角色 -->
                <li class="list-group-item">
                  <svg-icon icon-class="peoples" />所属角色
                  <div class="pull-right">{{ roleGroup }}</div>
                </li>
                <!-- 创建日期 -->
                <li class="list-group-item">
                  <svg-icon icon-class="date" />创建日期
                  <div class="pull-right">{{ user.createTime }}</div>
                </li>
              </ul>
            </div>
          </el-card>
        </el-col>
        <!-- 右侧基本资料卡片，占据18列，在xs屏幕下占据24列 -->
        <el-col :span="18" :xs="24">
          <!-- 使用el-card组件 -->
          <el-card>
            <!-- 卡片头部 -->
            <div slot="header" class="clearfix">
              <span>基本资料</span>
            </div>
            <!-- 使用el-tabs组件，v-model绑定activeTab -->
            <el-tabs v-model="activeTab">
              <!-- 基本资料选项卡 -->
              <el-tab-pane label="基本资料" name="userinfo">
                <!-- 引入userInfo组件，并传入user对象 -->
                <userInfo :user="user" />
              </el-tab-pane>
              <!-- 修改密码选项卡 -->
              <el-tab-pane label="修改密码" name="resetPwd">
                <!-- 引入resetPwd组件 -->
                <resetPwd />
              </el-tab-pane>
            </el-tabs>
          </el-card>
        </el-col>
      </el-row>
    </div>
  </template>
  
  <script>
  // 引入userAvatar、userInfo、resetPwd组件
  import userAvatar from "../system/user/profile/userAvatar";
  import userInfo from "../system/user/profile/UuserInfo";
  import resetPwd from "../system/user/profile/UresetPwd .vue";
  // 引入getUserProfile方法
  import { getUserProfile } from "@/api/system/user";
  
  export default {
    name: "Profile",
    // 注册组件
    components: { userAvatar, userInfo, resetPwd },
    data() {
      return {
        // 用户信息
        user: {},
        // 角色组
        roleGroup: {},
        // 岗位组
        postGroup: {},
        // 当前激活的选项卡
        activeTab: "userinfo"
      };
    },
    // 组件创建时调用getUser方法
    created() {
      this.getUser();
    },
    methods: {
      // 获取用户信息
      getUser() {
        getUserProfile().then(response => {
          // 将返回的数据赋值给user、roleGroup、postGroup
          this.user = response.data;
          this.roleGroup = response.roleGroup;
          this.postGroup = response.postGroup;
        });
      }
    }
  };
  </script>
  